<template>
  <div class="middle">
    <div class="content">
      <router-view @component="routerView"></router-view>
    </div>
    <ControlPanel class="controlPanel"/>
  </div>
</template>

<script>
  import ControlPanel from './ControlPanel'

    export default {
        name: "MiddleContent",
        data(){
            return{
                loading:"true",
                component:'',
            }
        },
        components:{
            ControlPanel,
        },
        methods:{
            routerView(val){
                this.component = val;
            },
            getComponent(){
                return this.component
            }
        }
    }
</script>

<style scoped>
  .middle{
    width: 1150px;
    margin: 20px auto;
    min-height: 2500px;
    position: relative;
    letter-spacing: 1px;
    /*border: rgb(211, 211, 211) 1px solid;  !* 可删 *!*/

    /*transform:translate(0,0)*/
  }

  .content, .controlPanel{
    /*float: left;*/
  }
  .controlPanel{
    position: fixed;
    top: 75px;
    margin-left: 840px;
    /*right: 55px;*/
    /*z-index: 0;*/
  }
</style>
